<template>
  <div class="home">
    <!-- <img alt="Vue logo" src="../assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/> -->
    <a-button type="primary" html-type="submit" @click="handlerClick">
      Submit
    </a-button>

    <a-select v-model:value="value1" @change="change" placeholder="请选择">
      <a-select-option value="jack">Jack</a-select-option>
      <a-select-option value="lucy">Lucy</a-select-option>
      <a-select-option disabled value="disabled" >
        Disabled
      </a-select-option>
      <a-select-option value="Yiminghe">yiminghe</a-select-option>
    </a-select>
    <a-config-provider :locale="locale">
      <a-range-picker @change="onRangeChange" :locale="locale" v-model:value="range" :format="dateFormat">
      </a-range-picker>
    </a-config-provider>
  </div>
</template>

<script>
// @ is an alias to /src
// import HelloWorld from '@/components/HelloWorld.vue'
import locale from 'ant-design-vue/es/locale/zh_CN';
import dayjs from 'dayjs';
import 'dayjs/locale/zh-cn';
dayjs.locale('en');
const dateFormat = 'YYYY-MM-DD';

export default {
  name: 'HomeView',
  components: {
    // HelloWorld,
  },
  data() {
    return {
      locale,
      dateFormat,
      value1:undefined,
      range:[
        dayjs('2019-09-03', dateFormat),
        dayjs('2019-11-22', dateFormat),
      ]
    }
  },
  watch:{
    value1:function(val){
       if(val==""){
        this.value1 = undefined
      }
    }
  },
  mounted(){
    setTimeout(()=>{
      this.value1 = "";
    },1000)
  },
  methods: {
    onRangeChange(start,end) { 
      console.log(start,end)
    },
    handlerClick(){
      console.log(this.range)
    },
    change(val){
    console.log(val,121212`1`)
      if(val==""){
        this.value1 = undefined
      }
    }
  }
}
</script>

<style>
.home .ant-btn-primary {
  border-radius: 4px;
  background: #d7e9f9;
  border-color: #1890ff;
  color: #1890ff;
  text-shadow: 0 -1px 0 rgb(0 0 0 / 12%);
  box-shadow: 0 2px 0 rgb(0 0 0 / 5%);
}

.home .ant-btn-primary:focus {
  background: inherit;
  border-color: inherit;
  color: inherit;
}

#app .home .ant-btn-primary:hover {
  color: #fff;
  border-color: #40a9ff;
  background: #40a9ff;
}

.home .ant-select-focused .ant-select-selector {
  border-color: red !important;
}

.home .ant-select .ant-select-selector {
  border-color: blue !important;
}
</style>
